<template>

  <!-- 端口设置 -->
  <v-container fluid>
    <!-- 表格标题 -->
    <v-row align="center" justify="center" class="header-row">
      <v-col cols="4" class="d-flex align-center justify-center">
        <div class="header-item">本地虚拟串口</div>
      </v-col>
      <v-col cols="3" class="d-flex align-center justify-center">
        <div class="arrow-item"><span class="double-arrow">&lt;-------></span></div>
      </v-col>
      <v-col cols="4" class="d-flex align-center justify-center">
        <div class="header-item">远程串口</div>
      </v-col>
      <v-col cols="1"></v-col> <!-- 占位，用于“确认/删除”按钮 -->
    </v-row>

    <!-- 动态数据行 -->
    <v-row
        v-for="(row, index) in rows"
        :key="index"
        align="center"
        justify="center"
        class="data-row"
    >
      <v-col cols="4" class="d-flex align-center justify-center">
        <v-select
            v-if="!row.confirmed"
            v-model="row.port"
            :items="availablePorts"
            item-text="txt"
            item-value="txt"
            dense
            hide-details
            no-data-text="无可用串口"
        ></v-select>
        <div v-else>{{ row.port }}</div>
      </v-col>

      <v-col cols="3" class="d-flex align-center justify-center">
        <div class="arrow-item"><span class="double-arrow">&lt;-------></span></div>
      </v-col>

      <v-col cols="4" class="d-flex align-center justify-center">
        <v-select
            v-if="!row.confirmed"
            v-model="row.remotePort"
            :items="availableRemotePorts"
            item-text="txt"
            item-value="txt"
            dense hide-details
            no-data-text="无可用串口"
        >
        </v-select>
        <div v-else>{{ row.remotePort }}</div>
      </v-col>
      <v-col cols="1" class="d-flex align-center justify-center">
        <v-btn icon @click="row.confirmed ? deleteRow(index) : confirmRow(index)"
               :color="row.confirmed ? 'red' : 'primary'">
          <v-icon>{{ row.confirmed ? 'mdi-close' : 'mdi-check' }}</v-icon>
        </v-btn>
      </v-col>
    </v-row>
    <v-row align="center" justify="center" class="mt-3">
      <v-btn icon :color="type ? 'grey' : 'red'" class="add-btn" @click="addRow">
        <v-icon> {{ type ? 'mdi-plus' : 'mdi-close' }}</v-icon>
      </v-btn>
    </v-row>
  </v-container>
</template>
<script>
// const portRule = /^([0-9]|[0-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/ // 端口号正则表达式（注释掉的部分）

export default {
  computed: {
    availableRemotePorts() { // 计算属性，返回可用的远程串口
      return this.remotePortStatus.filter(port => !port.status); // 过滤掉已被占用的端口
    },
    availablePorts() { // 计算属性，返回可用的本地虚拟串口
      return this.portStatus.filter(port => !port.status); // 过滤掉已被占用的端口
    }
  },
  props: {
    portInfo: { // 传递给组件的 props，包含端口信息
      type: Array, // 类型为数组
      required: true // 必须提供
    }
  },
  watch: {
    portInfo: { // 监听 portInfo 的变化
      immediate: true, // 组件创建时立即调用
      handler(newVal) { // 当 portInfo 更新时的处理函数
        for (const index in newVal) {
          const port = newVal[index].port; // 读取端口
          const remotePort = newVal[index].remotePort; // 读取远程端口
          this.rows.push({port: port, remotePort: remotePort, confirmed: true}); // 将端口信息添加到 rows
          const COM = this.remotePortStatus.find(p => p.txt === remotePort); // 查找远程端口状态
          COM.status = true; // 设置状态为占用
        }
      }
    }
  },
  data() {
    return {
      rows: [], // 存储动态数据行
      type: true, // 控制添加按钮图标状态
      portStatus: [ // 本地虚拟串口状态
        {txt: 'ETECON11', status: false},
        {txt: 'ETECON12', status: false},
        {txt: 'ETECON13', status: false}
      ],
      remotePortStatus: [ // 远程串口状态
        {txt: 'COM0', status: false},
        {txt: 'COM1', status: false},
        {txt: 'COM2', status: false}
      ],
      namesLocal: [] // 本地串口名称（未使用）
    };
  },
  methods: {
    updatePortStatus(selectedPort, selectedRemotePort) { // 更新端口状态
      const port = this.portStatus.find(p => p.txt === selectedPort); // 查找本地端口
      const remotePort = this.remotePortStatus.find(p => p.txt === selectedRemotePort); // 查找远程端口
      if (remotePort) {
        remotePort.status = true; // 将选中的远程端口设为占用
      }
      if (port) {
        port.status = true; // 将选中的本地端口设为占用
      }
    },
    allRowsConfirmed() { // 检查所有行是否已确认
      this.type = true; // 默认状态为 true
      if (this.rows.length === 0) return; // 如果没有行，则返回
      for (let r in this.rows) {
        if (!this.rows[r].confirmed) { // 如果有未确认的行
          return this.type = false; // 设置状态为 false
        }
      }
    },
    addRow() { // 添加行
      if (this.type) this.rows.push({port: '', remotePort: '', confirmed: false}); // 如果所有行已确认，则添加新行
      else this.deleteRow(this.rows.length - 1); // 否则删除最后一行
      this.allRowsConfirmed(); // 检查所有行的确认状态
    },
    confirmRow(index) { // 确认行
      if (this.rows[index].port && this.rows[index].remotePort) { // 如果端口和远程端口都已设置
        this.updatePortStatus(this.rows[index].port, this.rows[index].remotePort); // 更新端口状态
        this.rows[index].confirmed = true; // 将该行标记为已确认
        this.allRowsConfirmed(); // 检查所有行的确认状态
      } else {
        this.$emit('addRowErr', `串口不能为空`); // 如果未设置，发出错误事件
      }
    },
    deleteRow(index) { // 删除行
      const selectedPort = this.rows[index].remotePort; // 获取选中的远程端口
      const port = this.portStatus.find(p => p.txt === this.rows[index].port); // 查找本地端口
      const remotePort = this.remotePortStatus.find(p => p.txt === selectedPort); // 查找远程端口
      if (port) {
        port.status = false; // 将本地端口状态设为未占用
        remotePort.status = false; // 将远程端口状态设为未占用
      }
      this.rows.splice(index, 1); // 从 rows 中删除该行
      this.allRowsConfirmed(); // 检查所有行的确认状态
    },
    returnData() { // 返回已确认的端口数据
      const port = []; // 存储确认的端口信息
      for (const index in this.rows) {
        if (this.rows[index].confirmed) {
          port.push({port: this.rows[index].port, remotePort: this.rows[index].remotePort}); // 添加确认的行
        }
      }
      this.$emit('save', port); // 发出保存事件，传递确认的端口
      this.clearData(); // 清除数据
    },
    clearData() { // 清除所有数据
      for (const index in this.remotePortStatus) {
        this.portStatus[index].status = false; // 将本地端口状态设为未占用
        this.remotePortStatus[index].status = false; // 将远程端口状态设为未占用
        this.rows = []; // 清空 rows
      }
      this.allRowsConfirmed(); // 检查所有行的确认状态
    },
  },
};
</script> 
<style scoped> .header-row, .data-row {
  margin-bottom: 10px;
}

.header-item, .arrow-item {
  font-weight: bold;
}

.arrow-item {
  font-size: 1.5em; /* 根据需要调整箭头的大小 */
}

.double-arrow {
  display: inline-block;
  transform: scaleX(-1); /* 水平方向反转箭头 */
}

.add-btn {
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
</style>
